<template>
	<view class="index p10">
		<!--简洁 -->
		<view class="f-1 bff1 box">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="加料组名称:" prop="name" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<u--input placeholder="请输入加料组名称" border="none" v-model="form.name" placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#fff',borderRadius:'16rpx'}"></u--input>
				</u-form-item>
				<u-form-item label="加料品:" prop="add_ids" ref="item1" labelWidth="100px" :required="true" borderBottom>
					<scroll-view class="scroll f-1 bf8 db" scroll-y="true">
						<view>
							<checkbox-group class="uni-list" @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd flex mt10" v-for="item in list"
									:key="item.id">
									<view>
										<checkbox :value="item.id" :checked="item.checked"></checkbox>
									</view>
									<view>{{item.name}}</view>
								</label>
							</checkbox-group>
						</view>
					</scroll-view>
				</u-form-item>
			</u--form>
		</view>

		<!-- 按钮 -->
		<view class="mt10">
			<u-button type="primary" :loading="loading" :customStyle="{color:'#000'}" :plain="true" text="确定" color="#0055ff"
				@click="submit()">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				form: {
					name: '',
					price: 0,
					stock: 0,
					add_ids: []
				},
				list: [],
				rules: {
					name: [{
						required: true,
						message: '请输入加料组名称',
						trigger: ['blur'],
					}, ],
				},
				addAndEditType: 0,
				info_id:'',
				loading:false,
			}
		},
		onLoad(option) {
			if(option.id){
				this.info_id=option.id;
			}
			this.getjialioapinList();
		},
		watch: {

		},
		methods: {
			async getInfo(){
				let {
					code,
					data,
					msg
				} = await this.beg.request({
					url: '/admin/product.AddFood/getInfo',
					method: 'POST',
					data: {
						id: this.info_id,
					},
				})
				if(code==1){
					data.add_ids=data.add_ids.split(',');
					let add_ids=[];
					data.add_ids.forEach((v)=>{
						this.list.forEach((vv)=>{
							if(v==vv.id){
								add_ids.push(vv.id);
								vv.checked=true;
							}
						})
					})
					data.add_ids=add_ids;
					this.form=data;
				}else{
					uni.$u.toast(msg)
				}
			},
			checkboxChange(e) {
				this.form.add_ids=e.detail.value;
			},
			async getjialioapinList() {
				let {
					data:{
						data
					}
				} = await this.beg.request({
					url: '/admin/product.AddFood/index',
					method: 'POST',
					data: {
						page: 1,
						limit: 200,
						operate_status: 1,
						dy_sync_status: 1,
						is_deleted: 0
					},
				})
				data.forEach((val) => {
					val.checked = false;
				})
				this.list = data;
				if(this.info_id!=''){
					this.getInfo();
				}
				
			},
			 submit() {
				if(this.form.add_ids.length==0){
					uni.$u.toast('请选择加料品')
					return;
				}
				this.$refs.uForm.validate().then(res => {
					let data = {};
					Object.assign(data, this.form);
					let add_ids=[];
					this.list.forEach((v)=>{
						this.form.add_ids.forEach((vv)=>{
							if(v.id==vv){
								add_ids.push(v.id);
							}
						})
					})
					data.add_ids=add_ids.join(',');
					this.postData(data);
				}).catch(errors => {
					uni.$u.toast('请填写完整的信息')
				})
			},
			async postData(data){
				this.loading=true;
				let {
					code,
					msg
				} = await this.beg.request({
					url: '/admin/product.AddFood/saveClass',
					method: 'POST',
					data: data,
				})
				if(code==1){
					uni.$u.toast(msg);
					setTimeout(()=>{
						this.returnIndex();
					},1000)
				}else{
					this.loading=false;
					uni.$u.toast(msg)
				}
				
			},
			//返回
			returnIndex(){
				this.loading=false;
				uni.navigateBack({
					delta:1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		padding: 20rpx;
		line-height: 1.5;
		position: relative;
		margin-top: 20rpx;
		border-radius: 20rpx;



		.prid {
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.jiao {
				right: 10rpx;

				.jiaohang {
					display: flex;
					align-items: center;

					.rijianju {
						margin-right: 10rpx;
					}
				}
			}
		}

		.prod {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}

		.prname {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			width: 20%;
			text-align: right;
		}
	}

	.scroll {
		height: 50vh;
		background-color: #fff;
	}

	/deep/.u-form-item__body {
		padding: 0px;
	}
</style>